<template>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>头像</th>
                    
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td><img :src="user.avatar" alt="用户头像" class="avatar"></td>
                  
                </tr> 
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            users:[]
        }
    },
    created(){
        axios.get('http://localhost:3000/users').then((res)=>{
            console.log(res.data);
            this.users = res.data
        }).catch(error => {
            console.error('获取用户信息失败:', error);
        });
    },
    methods:{
        
    }
}
</script>

<style scoped>
.table-container {
    margin: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f4f4f4;
    color: #333;
}

tr:hover {
    background-color: #f1f1f1;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
</style>
